<template>
    <div class="root">
        <h1>{{ name }}</h1>
        <br>
        <h1>{{ address }}</h1>
        <br>
        <h2 v-if= studentName>{{ studentName }}</h2>
        <button @click=sendNameToStudent> 把学校名发给学生 </button>
        <button @click=sendIDtoStudent> 发送nanoID给学生 </button>
        <button @click=destroyMe>destroyMe,我注销了所有事件</button>
    </div>
</template>

<script>

import { nanoid } from "nanoid";
export default {
    name: 'MySchool',
    data() {
        return {
            name: '深圳大学',
            address: "深南大道3599号",
            studentName:null
        }
    },
    methods:{
        sendNameToStudent(){
            console.log(this)
            this.$bus.$emit('getSchoolName',this.name);
        },
        destroyMe(){
            this.$destroy()
        },
        sendIDtoStudent(){
            this.$bus.$emit('getNanoid',nanoid());
        }
    },
    mounted() {
        this.$bus.$on('getStudentName',(name)=>{
            this.studentName = name;
        })
    },
    beforeDestroy(){
        // this.$bus.$off('getSchoolName')
        // this.$bus.$off(['getSchoolName'])
        //这么写回把所有的事件全部注销
        this.$bus.$off()
    }

}
</script>
 

<style lang="less" scoped>
    .root {
        background-color: plum;
    }
</style>